<template>
  <button class="sort" :class="{'sort-desc':state=='desc','sort-asc':state=='asc'}" @click="sort">
    {{text}}</button>
</template>
<script>
export default {
  props: {
    text: {
      type: String
    },
    initState: {
      type: String
    },
    mode: {
      type: Array,
      default: function() {
        return ['desc', 'asc']
      }
    }
  },
  data: function() {
    return {
      state: this.initState
    }
  },
  methods: {
    sort: function() {
      if (this.state !== this.mode[0]) {
        this.state = this.mode[0]
      } else {
        this.state = this.mode[1]
      }
      this.$emit('sort', this.state)
    }
  }
}
</script>

<style scoped lang="scss" scoped>
.sort {
  color: #666;
  font-size: 12px;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  background: #f4f4f4;
  min-width: 77px;
  height: 25px;
  position: relative;
  padding: 0 30px 0 10px;
  cursor: pointer;
  &:after {
    content: ' ';
    position: absolute;
    width: 9px;
    height: 10px;
    top: 6px;
    right: 10px;
    background: url(../assets/images/sort.png) no-repeat center center;
  }
  &.sort-asc,
  &.sort-desc {
    background: #ff6900;
    color: #fff;
  }
  &.sort-asc:after {
    background: url(../assets/images/asc.png) no-repeat center center;
    transition: 0.4s transform ease-in-out;
  }
  &.sort-desc:after {
    background: url(../assets/images/asc.png) no-repeat center center;
    transform: rotate(180deg);
    transition: 0.4s transform ease-in-out;
  }
}
</style>



// WEBPACK FOOTER //
// src/components/jSortButton.vue